<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 14:28:55
 * @Description: 
-->
<template>
  <view class="tab_group">
    <text class="tab active">概览</text>
  </view>
  <view class="content">
    <view class="white_card">
      <text class="title">今日实时数据</text>
      <view class="row_item">
        <view class="flex1">
          <text class="p">商家订单实收/元</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 
            <text class="top">&#8593;200.00</text>
          </text>
        </view>
        <view class="flex1">
          <text class="p">有效订单总数/个</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 
            <text class="bottom">&#8595;200.00</text>
          </text>
        </view>
      </view>
      <view class="row_item">
        <view class="flex1">
          <text class="p">商家订单实收/元</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 <text> &#8593;200.00</text></text>
        </view>
        <view class="flex1">
          <text class="p">有效订单总数/个</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 <text> &#8595;200.00</text></text>
        </view>
      </view>
      <view class="row_item">
        <view class="flex1">
          <text class="p">商家订单实收/元</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 <text>200.00</text></text>
        </view>
        <view class="flex1">
          <text class="p">有效订单总数/个</text>
          <text class="num">1401</text>
          <text class="p">与昨日同比 <text>200.00</text></text>
        </view>
      </view>
    </view>
    <view class="white_card mt_10">
      <view class="title_group">
        <text class="title">历史营业数据</text>
        <input @click="timeShow = true" type="text" placeholder="请选择时间" class="time_input">
      </view>
      <view class="tab_card">
        <view :class="{card:true, 'cardActive': tabActive === i}" v-for="(item, i) in tabCard" @click="switchTab(item, i)">{{item.label}}</view>
      </view>
      <Echarts/>
    </view>
  </view>


  <tm-drawer v-model:show="timeShow" :height="900" hideHeader>
    <view class="pa-16">
      <tm-time-between @confirm="timeShow = false" :asyncModel="false"></tm-time-between>
    </view>
  </tm-drawer>

  <m-tabbar :active="3"/>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import mTabbar from '@/components/Tabbar'
  import Echarts from './components/Echarts.vue'
  const timeShow = ref(false)
  const tabActive = ref(0)
  const tabCard = reactive([
    {label: '有效订单'},
    {label: '无效订单'},
    {label: '营业额'}
  ])
  const switchTab = (item, i)=>{
    tabActive.value = i
  }
</script>
<style lang="scss" scoped>
.tab_group{display:flex; background-color: #fff; padding-top: 10px;
.tab{font-size: 14px; margin: 0 20px; color: #333; padding-bottom: 10px; border-bottom: 2px solid transparent;}
.active{color: #2DAED6; border-bottom: 2px solid #2DAED6;}
}
.row_item{display: flex; margin-bottom: 20px; &:last-child{margin-bottom: 0;}}
.flex1{flex: 1;
.top{color: #F77F3F;} .bottom{color: #66A851;}
}
.p,.num,.title{display: block; color: #333333; }
.num{font-size: 24px; margin: 7px 0;}
.p{font-size: 12px; color: #666666;}
.title{font-size: 16px; font-weight: 500; margin-bottom: 12px;}
.title_group{display: flex; justify-content: space-between; align-items: center;
  .title{margin-bottom: 0;}
}
.time_input{border: 1px solid #eee; width: 180px; height: 30px; line-height: 30px; font-size: 12px; border-radius: 4px; padding: 0 10px;}
.tab_card{display: flex; margin: 10px 0; height: 30px; line-height: 30px; font-size: 12px; color: #666; border-radius: 4px; border: 1px solid #eee;
.card{flex: 1; text-align: center; border: 1px solid transparent; border-right: 1px solid #eee; &:last-child{border-right: 1px solid transparent;}}
.cardActive{border: 1px solid #2DAED6 !important; padding: -1px; background-color: #D5EFF6; color: #2DAED6; position: relative; z-index: 3; border-radius: 4px;}
}
</style>